<template>
  <div class="pay-info">
    <titleBar title="交易详情" back_path="/" />
    <div v-if="loadStatus === 1" class="data-nil">加载中</div>
    <template v-if="loadStatus === 2">
      <div class="head">
        <img
          :src="orderInfo.payStatus ? require('@/assets/img/performance/homePage/pay-info-icon.png') : require('@/assets/img/performance/homePage/nopay-info-icon.png')"
        />
        <p class="text">{{ orderInfo.payStatus ? '付款成功' : '未支付' }}</p>
      </div>
      <div class="info">
        <div class="flex">
          <p class="name">作图数量</p>
          <p class="text">{{orderInfo.imageNumber}}张</p>
        </div>
        <div class="flex" v-if="orderInfo.orderType !== 2">
          <p class="name">初次上门</p>
          <p class="text">{{orderInfo.homeTime}}</p>
        </div>
        <div class="flex" v-if="orderInfo.orderType !== 2">
          <p class="name">预约日期</p>
          <p class="text">{{
            orderInfo.ordersTimeInfos
            .map(e => e.preordainDate)
            .sort(
                (a, b) => (+new Date(a.replace(/-/g, '/'))) - (+new Date(b.replace(/-/g, '/')))
            ).join('、')
            }}</p>
        </div>
        <div class="flex" v-if="orderInfo.orderType !== 2">
          <p class="name">约定地点</p>
          <p class="text">{{orderInfo.addressInfo}}</p>
        </div>
        <div class="flex" v-if="orderInfo.orderType !== 2">
          <p class="name">{{ orderInfo.subsequentAmountPayStatus === null ? '预付金额' : '尾款金额'}}</p>
          <p
            class="text"
          >¥ {{ orderInfo.subsequentAmountPayStatus === null ? orderInfo.subsist : orderInfo.subsequentAmount }}</p>
        </div>
        <div class="flex" v-if="orderInfo.orderType === 2">
          <p class="name">改图师</p>
          <p class="text">{{orderInfo.receiverUser}}</p>
        </div>
        <div class="flex" v-if="orderInfo.orderType === 2">
          <p class="name">所需时间</p>
          <p class="text">{{orderInfo.ordersTimeInfos.length}}天</p>
        </div>
        <div class="flex" v-if="orderInfo.orderType === 2">
          <p class="name">改图报价</p>
          <p class="text">¥ {{orderInfo.subsist}}</p>
        </div>
      </div>
      <div class="buttons">
        <div
          class="button b1"
          v-if="orderInfo.payStatus && orderInfo.orderType !== 2"
          v-on:click="goDetail"
        >查看订单详情</div>
        <div class="button b1" v-if="!orderInfo.payStatus" v-on:click="repay">重新付款</div>
        <div class="button b2" v-on:click="goHome">返回首页</div>
      </div>
      <div v-if="isPayWay" class="upDoor-popup pay-way-box">
        <div class="mask"></div>
        <div class="inner">
          <div class="flex flex-space-x handle-head">
            <div></div>
            <div class="title-name">请选择支付方式</div>
            <div class="close-block" v-on:click="isPayWay = false">
              <i class="iconfont icon-guanbi1"></i>
            </div>
          </div>
          <div class="pay-list">
            <div
              class="pay-item flex flex-center-y flex-space-x"
              v-for="(item, index) in payWayList"
              :key="index"
              v-on:click="switchPayWay(index)"
            >
              <div class="flex flex-center-y">
                <i
                  v-if="item.icon"
                  class="pay-way-wconfont iconfont"
                  :class="[item.icon]"
                  :style="item.styles"
                ></i>
                <img class="pay-way-wconfont" v-if="item.img" :src="item.img" />
                <span>{{item.name}}</span>
              </div>
              <i v-if="payOrderPayWayActiveIndex === index" class="select-block iconfont icon-dui"></i>
              <i v-else></i>
            </div>
            <div
              class="pay-item flex flex-center-y flex-space-x"
              :key="`_${index}`"
              v-on:click="addBank"
            >
              <div class="flex flex-center-y">
                <img class="pay-way-wconfont" src="@/assets/img/performance/homePage/bank.png" />
                <span>银行卡账号</span>
              </div>
              <div class="add" v-on:click="addBank">
                <span>添加</span>
                <i class="iconfont icon-iconfonticonfonti2copycopy"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import titleBar from "@/components/title_bar/index.vue";
import { async } from "q";
import { mapMutations, mapState } from "vuex";
import {
  dafaultDateCelectColumns,
  dafaultDemandList,
  defaultPayWayList
} from "../pay_order/constant";
import { getuserUid } from "@/utils/auth.js";
import { paying } from "@/utils/pay.js";

export default {
  components: {
    titleBar
  },
  data() {
    return {
      orderInfo: {
        ordersTimeInfos: [],
        orderType: 1,
        receiverUser: ""
      },
      orderId: 0,
      repayinfo: null,
      isRepay: false,
      paytype: 0,
      isPayWay: false,
      payWayList: defaultPayWayList,
      oldparams: null,
      loadStatus: -1,
      loadNumber: 1
    };
  },
  computed: {
    ...mapState([
      "payOrderProjectName",
      "payOrderUpDoordateCelectIndex",
      "payOrderUpDoorDateCelectActive",
      "payOrderConventionDate",
      "payOrderDemandIndex",
      "payOrderDemandActive",
      "payOrderPayWayActiveIndex",
      "payOrderSelectDateFullDateArr"
    ])
  },
  async created() {
    console.log("--进入了支付信息页面--");
    console.log(this.$route);
    let errorHandle = () => {
      console.log("参数错误");
      this.$toast("参数异常");
      window.setTimeout(() => {
        this.$router.go(-1);
      }, 1000);
    };
    let orderId = this.$route.query?.order;
    let _fetch = this.$route.query?.fetch;
    // let paytype = this.$route.query?.paytype
    this.orderId = orderId;
    if (!orderId) {
      errorHandle();
      return;
    }
    if (_fetch) {
      try {
        this.repayinfo = JSON.parse(decodeURI(_fetch));
        this.isRepay = true;
        this.bankList();
        // this.paytype = paytype
        console.log("---repayinfo---");
        console.log(this.repayinfo);
      } catch (error) {
        alert("参数异常");
        console.log(error);
      }
    }
    let param = {
      orderUid: orderId
    };
    this.loadNumber = 1;
    this.initInfo(param);
  },
  methods: {
    ...mapMutations(["UPDATE"]),
    /**
     * 获取展示信息
     */
    async initInfo(param) {
      let paystatus = this.$route.query?.paystatus === "1";
      this.loadStatus = 1;
      let response = await HTTP("order/selectOrderInfoByUid", param);
      this.oldparams = JSON.parse(JSON.stringify(param));
      try {
        if (response.code !== 200) {
          this.$toast(response.msg || "服务器异常");
          return;
        }
        console.log("---response--");
        console.log(response.data);
        this.orderInfo = {
          ...response.data.map,
          // payStatus: response.data.payStatus
          payStatus: paystatus // response.data.payStatus
        };
        // console.log(this.loadNumber)
        // 轮询获取数据
        if (false) {
          if (this.loadNumber >= 20) {
            this.$dialog
              .alert({
                title: "提示",
                message: "网络延时，请稍后再查看"
              })
              .then(() => {
                this.goHome();
              });
            return;
          }
          if (
            response.data.subsistPayStatus == 2 ||
            response.data.subsequentAmountPayStatus == 2
          ) {
            this.loadNumber += 1;
            setTimeout(() => {
              this.initInfo(param);
            }, 1e3);
            return;
          }
        }
        this.loadStatus = 2;
      } catch (error) {
        this.$toast("数据开小差了");
        console.log(error);
      }
    },
    async bankList() {
      let params = {
        userUid: getuserUid()
      };
      let bankResponse;
      try {
        bankResponse = await HTTP("app/user/getUserBankCards", params);
        if (bankResponse.code !== 200) {
          this.$toast(bankResponse.msg);
          return;
        }
        console.log("银行卡列表");
        console.log(bankResponse.data);
        this.payWayList = [
          ...defaultPayWayList,
          ...bankResponse.data.map(e => {
            return {
              ...e,
              name: `${
                e.bankName ? e.bankName : "银行卡"
              }(${e.bankCardNumber.substr(e.bankCardNumber.length - 4)})`,
              img: require("@/assets/img/performance/homePage/bank.png")
            };
          })
        ];
        // this.orightBankList = bankResponse.data
      } catch (error) {
        this.$toast("数据开小差了");
        console.log(error);
      }
    },
    switchPayWay(index) {
      // this.UPDATE(['payOrderPayWayActiveIndex', index])
      // this.isPayWay = false
      let payType = index === 0 ? 2 : index === 1 ? 1 : 3;
      this.starrepay(payType, index);
    },
    goHome() {
      this.$router.replace("/designer/homePage");
    },
    goDetail() {
      let orderId = this.$route.query?.order;
      this.setorderUid(orderId);
      // if (this.orderInfo.orderStatus == 5) {
      //   // this.seticonUrl("finished");
      // } else {
      //   // this.seticonUrl(null);
      // }

      this.$router.push("/designer/orderDetail");
    },
    ...mapMutations(["setorderUid", "seticonUrl"]),
    async starrepay(payType, index) {
      const Toast = TESTVUE.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: "spinner",
        mask: true,
        message: ""
      });
      let payparams = {
        ...this.repayinfo.params,
        payType
      };
      if (payType === 3) {
        payparams.bankCardUid = this.payWayList[index].uid;
      }
      let payResponse;
      try {
        payResponse = await HTTP(this.repayinfo.url, payparams);
        if (payResponse.code !== 200) {
          this.$toast(payResponse.msg || "异常");
          return;
        }
        Toast.clear();
        // console.log(JSON.stringify(payResponse.data))
        paying(
          {
            url: this.repayinfo.url,
            params: payparams
          },
          payType,
          payResponse.data,
          payResponse.msg,
          null,
          () => {
            this.isPayWay = false;
            console.log("--取消支付回调--");
            this.$router.replace({
              path: this.$route.path,
              query: { ...this.$route.query, order: payResponse.msg, paystatus: '0' }
            });
          },
          () => {
            this.isPayWay = false;
            // 修改订单号，获取最新的信息
            let param = {
              ...this.oldparams,
              orderUid: payResponse.msg
            };
            // 修改订单Url 上面的 order
            // payResponse.msg
            this.$router.replace({
              path: this.$route.path,
              query: { ...this.$route.query, order: payResponse.msg, paystatus: '1' }
            });
            // 取消支付 OR 支付失败的回调
            console.log("----回调 支付完成  修改展示数据---");
            console.log(param);
            this.loadNumber = 1;
            window.setTimeout(() => {
              this.initInfo(param);
            }, 300);
            // window.setTimeout(() => {
            //   this.initInfo(param);
            // }, 1e3);
          }
        );
      } catch (e) {
        console.log(e);
        Toast.clear();
        this.$toast("数据开小差了");
      }
    },
    repay() {
      this.isPayWay = true;
    },
    addBank() {
      this.$router.push("/performance/bindbank?type=3&userUid=" + getuserUid());
    }
  }
};
</script>
<style lang="scss" scoped>
.pay-info {
  .head {
    background-color: #5e8efe;
    height: 3.04rem;
    text-align: center;
    img {
      width: 1.86rem;
      height: 1.86rem;
      margin-top: 0.25rem;
    }
    .text {
      margin-top: 0.2rem;
      font-size: 0.28rem;
      color: rgba(255, 255, 255, 1);
    }
  }
  .info {
    font-size: 0.28rem;
    background-color: #fff;
    padding: 0.5rem 0px;
    .name {
      color: rgba(149, 149, 149, 1);
      line-height: 28px;
      width: 1.8rem;
      text-indent: 0.48rem;
      white-space: nowrap;
    }
    .text {
      line-height: 28px;
      width: 5.1rem;
      color: #282828;
    }
  }
  .button {
    width: 7.02rem;
    height: 0.88rem;
    border-radius: 0.1rem;
    margin: auto;
    text-align: center;
    line-height: 0.88rem;
  }
  .buttons {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding-bottom: 0.36rem;
    .b1 {
      color: rgba(94, 142, 254, 1);
      background: rgba(255, 255, 255, 1);
      border: 2px solid;
      margin-bottom: 0.4rem;
    }
    .b2 {
      color: #fff;
      background: rgba(94, 142, 254, 1);
    }
  }

  .upDoor-popup {
    position: fixed;
    width: 100%;
    bottom: 0px;
    height: 100%;
    left: 0px;
    z-index: 88;
    .mask {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .inner {
      position: absolute;
      bottom: 0px;
      width: 100%;
      .handleColum {
        padding: 0.29rem 0.24rem;
        color: #656565;
        background: #fff;
        font-size: 0.32rem;
        .done {
          color: #5e8efe;
        }
      }
    }
  }
  .pay-way-box {
    .handle-head {
      border-radius: 0.3rem 0.3rem 0px 0px;
      background-color: #fff;
      height: 1rem;
      line-height: 1rem;
      width: 100%;
      .title-name {
        font-size: 0.32rem;
      }
      .close-block {
        margin-right: 0.24rem;
        .iconfont {
          color: #b1b1b1;
          font-size: 0.36rem;
        }
      }
    }
    .pay-list {
      font-size: 0.28rem;
      max-height: 75vh;
      overflow: auto;
      .pay-item {
        height: 1.36rem;
        border-top: 1px solid #ededed;
        background-color: #fff;
        padding: 0px 0.24rem;
        box-sizing: border-box;
        .pay-way-wconfont {
          width: 0.64rem;
          height: 0.64rem;
          font-size: 0.64rem;
          display: inline-block;
          margin-right: 0.2rem;
        }
        .select-block {
          display: inline-block;
          height: 0.24rem;
          font-size: 0.24rem !important;
          color: #5e8efe;
        }
        .add {
          color: $color-text-regular;
          font-size: 0.28rem;
          .iconfont {
            color: #aaa;
            font-size: 0.24rem;
          }
        }
      }
    }
  }
}
</style>

